<template>
  <div id="select-card">
    <!-- back part -->
    <div class="pc">
      <go-to-back></go-to-back>

      <!-- order info part -->
      <div class="order-info">
        <div class="info-sn">订单号：{{ order_sn }}</div>
        <div class="info-price ">
          订单金额：<span class="price-color">{{ order_price }}</span> 人民币
        </div>
      </div>

      <!-- select card inputs part -->
      <div class="select-card-container">
        <div class="select-title">快捷支付</div>
        <div class="select-body">
          <div class="center-wrapper">
            <div class="select-inputs">
              <label>
                <span>银行卡号</span>
                <div class="select-box">
                  <div id="select-tagId" class="select-tag" @click="toggleSelect">
                    <span>{{ form_data.bank_card || "请选择银行卡" }}</span>
                    <img src="@/assets/images/pc_black/about/arrow_down.png" />
                  </div>

                  <transition name="fade">
                    <div class="select-content" v-if="isShowSelect">
                      <ul>
                        <li v-for="(item, index) in card_options" :key="index" @click="chooseCard(item)">
                          {{ item.card_no }}
                        </li>
                      </ul>
                    </div>
                  </transition>
                </div>
              </label>

              <label>
                <span>手机号</span>
                <input class="cardInput" type="text" placeholder="请输入银行预留手机号" v-model="form_data.phone_num"
                  maxlength="11" @input="phoneInputing" />
              </label>
            </div>

            <div class="select-agree">
              <img v-if="isAgree" src="@/assets/images/pc_black/auth/select_yes.png" @click="toggleAgree" />
              <img v-else src="@/assets/images/pc_black/auth/select_not.png" @click="toggleAgree" />
              <div>
                我同意<span class="privacySpan" @click="gotoPrivacy('f')">《连连支付服务协议》</span>和<span class="privacySpan"
                  @click="gotoPrivacy('y')">《连连支付隐私权政策》</span>
              </div>
            </div>

            <div class="confirm-btn">
              <button @click="confirm('pc')">下一步</button>
              <button @click="gotoBindCard">其它银行卡支付</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="phone">
      <p class="bindTitle">快捷支付</p>
      <div class="orderInfo">
        <p class="orderTitle">订单号：</p>
        <p>{{ order_sn }}</p>
      </div>
      <div class="orderInfo">
        <p class="orderTitle">订单金额：</p>
        <p><span>¥</span>{{ order_price }}</p>
      </div>
      <form v-on:submit.prevent>
        <div class="selectInputs">
          <div class="inputBox">
            <span class="inputLabel">银行卡号</span>
            <div class="selectBox">
              <div id="selectTagId" class="selectTag" @click="toggleSelect">
                <span :class="{ isChose: form_data.bank_card }">{{
                    form_data.bank_card || "请选择银行卡"
                }}</span>
                <img src="@/assets/images/pc_black/about/arrow_down.png" />
              </div>
            </div>
          </div>

          <div class="inputBox">
            <span class="inputLabel">手机号</span>
            <input class="nameInput" type="text" placeholder="请输入银行预留手机号" v-model="form_data.phone_num" maxlength="11"
              @input="phoneInputing" />
          </div>
        </div>

        <div class="privacy">
          <img class="privacy_left" @click="toggleAgree" v-if="isAgree"
            src="@/assets/images/mobile_black/login/agree.png" />
          <img class="privacy_left" @click="toggleAgree" v-else src="@/assets/images/mobile_black/login/disagree.png" />
          <span class="privacy_right"><span @click="toggleAgree">我同意</span><span class="cGreen"
              @click="gotoPrivacy('f')">《连连支付服务协议》</span><span>和</span>
            <span class="cGreen" @click="gotoPrivacy('y')">《连连支付隐私权政策》</span>
          </span>
        </div>
        <div class="btnBox">
          <van-button v-if="!isAgree" class="submit btn_grey" :disabled="!isAgree">下一步</van-button>
          <van-button v-else class="submit btn_color" :disabled="!isAgree" @click="confirm('phone')">下一步</van-button>
          <van-button class="otherPay submit btn_color" @click="gotoBindCard">其他银行卡支付</van-button>
        </div>

        <van-popup v-model:show="isShowSelect" position="bottom" class="cardPop">
          <div class="phoneContent">
            <p class="contentTitle">请选择银行卡</p>
            <img :src="closeIcon" @click="isShowSelect = false" class="closeIcon" />
            <div class="phoneContentInfo">
              <p v-for="(item, index) in card_options" :key="index" @click.stop="chooseCard(item)">
                {{ item.card_no }}
              </p>
            </div>
          </div>
        </van-popup>
      </form>
    </div>
    <CardTips :options=cardTipsInfo @cancel="cancelTips" @confirm="confirmTips"></CardTips>
  </div>
</template>

<script>
// --- conponents ---
import GoToBack from "../category/components/GoToBack.vue";
// --- vuelidate ---
import { required, minLength } from "vuelidate/lib/validators";
// --- api ---
import { bankcardInfoApi, advancePayApi, payOrderApi, tradeCreateApi, paymentBankcardApi } from "@/api";
// --- utils ---
import { iscode, isPhone } from "@/utils";
import { mapState, mapMutations } from "vuex";
import CardTips from "./components/CardTips.vue";
export default {
  name: "SelectCard",
  components: { GoToBack, CardTips },
  props: {},
  data() {
    return {
      //订单价格
      order_price: "",
      // 订单号
      order_sn: "",
      // 是否展示银行卡选项
      isShowSelect: false,
      // 银行卡名称显示（仅显示）
      card_info_name: "",
      // 银行卡选项内容数据
      card_options: [],
      // 表单信息
      form_data: {
        bank_card: "",
        phone_num: "",
      },
      // 协议是否同意
      isAgree: false,
      // 预支付成功后返回的信息
      paymentOrderId: "",
      kaptchaCode: "",
      //弹窗关闭按钮
      closeIcon: require("@/assets/images/mobile/closeIcon.png"),
      //提示框信息
      cardTipsInfo: {
        isShow: false
      },
    };
  },
  // vuelidate验证表单
  validations: {
    form_data: {
      bank_card: {
        required,
      },
      phone_num: {
        required,
        minLength: minLength(11),
      },
    },
  },
  computed: {
    ...mapState(["userInfo", 'payInfo', 'couponId'])
  },
  methods: {
    // ------ store ------
    ...mapMutations(["setCouponId", 'setPayInfo']),
    // ------ async ------
    // 获取银行卡信息
    async bankcardInfo() {
      let res = await bankcardInfoApi({
        order_sn: this.$route.query.order_sn,
      });
      if (iscode(res)) {
        this.card_options = res.result.list;
      }
    },
    //连连
    async tradeCreate() {
      let res = await tradeCreateApi({
        order_sn: this.order_sn,
        coupon_id: this.couponId,
      })
      if (iscode(res)) {
        this.form_data.real_name = res.result.real_name;
        this.form_data.id_card = res.result.id_card;
        this.order_price = res.result.total_price;
      }
    },
    // 预支付
    async advancePay(type) {
      let client_chnl = ''
      if (type == 'pc') {
        client_chnl = 13
      } else {
        client_chnl = 16
      }
      let res = await paymentBankcardApi({
        order_sn: this.order_sn,
        real_name: this.form_data.real_name,
        id_card: this.form_data.id_card,
        card_no: this.form_data.bank_card,
        phone: this.form_data.phone_num,
        client_chnl: client_chnl
      });
      if (res.code == 3004) {
        this.cardTipsInfo.isShow = true;
      } else if (iscode(res)) {
        let payInfo = {
          card_no: res.result.card_no,
          client_chnl: client_chnl,
          order_sn: res.result.order_sn,
          order_price: this.order_price,
        }
        this.setPayInfo(payInfo)
        if (isPhone()) {
          this.$toast("短信发送成功");
        } else {
          this.$message({
            message: "短信发送成功",
            iconClass: "mySuccessIcon",
            customClass: "mySuccess",
          });
        }

        this.$router.push({
          path: "/mail/confirmCardPay"
        });
      }
    },
    // ------ common ------
    // 确定提交
    confirm(type) {
      if (this.$v.form_data.$invalid) {
        if (type == 'pc') {
          // 没填完
          this.$message({
            message: "请检查填写信息是否完整",
            iconClass: "myErrorIcon",
            customClass: "myError",
          });
        } else {
          this.$toast('请检查填写信息是否完整');
        }

      } else if (this.form_data.bank_card === "请选择银行卡") {
        if (type == 'pc') {
          // 没选银行卡
          this.$message({
            message: "请选择银行卡",
            iconClass: "myErrorIcon",
            customClass: "myError",
          });
        } else {
          this.$toast('请选择银行卡');
        }
      } else if (!this.$v.form_data.$invalid && !this.isAgree) {
        if (type == 'pc') {
          // 填完了但没勾选
          this.$message({
            message: "请勾选服务协议和隐私政策",
            iconClass: "myErrorIcon",
            customClass: "myError",
          });
        } else {
          this.$toast('请勾选服务协议和隐私政策');
        }
      } else {
        this.advancePay(type);
      }
    },
    // 手机号码输入事件
    phoneInputing() {
      this.$nextTick(() => {
        this.form_data.phone_num = this.form_data.phone_num.replace(
          /[^\d]/g,
          ""
        );
      });
    },
    // 切换是否同意协议
    toggleAgree() {
      this.isAgree = !this.isAgree;
    },
    // 切换是否显示选项卡
    toggleSelect() {
      this.isShowSelect = !this.isShowSelect;
    },
    // 选择银行卡选项
    chooseCard(payload) {
      // this.card_info_name = payload.bind_cardId; // 用于显示（不确定要显示银行卡名字还是显示银行卡卡号）
      // this.form_data.bank_card = payload.bind_cardId; // 用于提交
      this.form_data.bank_card = payload.card_no;
      this.form_data.phone_num = payload.phone;
    },
    // 初始化表单数据
    initFormData() {
      this.form_data = {
        bank_card: "请选择银行卡",
        phone_num: "",
      };
      this.isAgree = false;
    },

    // ------ goto ------
    // 前往绑定银行卡
    gotoBindCard() {
      this.$router.push({
        path: "/mail/bindCard",
        query: {
          order_sn: this.order_sn,
        },
      });
    },
    // 打开服务协议或隐私政策页面
    gotoPrivacy(type) {
      // f是服务协议 y是隐私政策
      if (type === "y") {
        window.open(`/html/lianPrivacy.html`, "_blank")
      } else {
        window.open(`/html/userAgreement.html`, "_blank")
      }
    },
    //取消提示弹框
    cancelTips() {
      this.cardTipsInfo.isShow = false;
    },
    //确定提示弹框
    confirmTips(payload) {
      this.cardTipsInfo.isShow = false;
      if (payload == 'pc') {
        this.$router.push('/personalCenter')
      } else {
        this.$router.push('/unpaid')
      }
    },
  },
  created() {
    // 从路由地址上获取订单信息
    this.order_sn = this.$route.query.order_sn;
    // 银行卡信息查询
    this.bankcardInfo();
    this.tradeCreate();
    // 点击外侧关闭选项卡
    document.addEventListener("mouseup", (e) => {
      //获取弹窗对象
      const userCon = document.getElementById("select-tagId");

      //判断弹窗对象中是否包含点击对象
      if (userCon && !userCon.contains(e.target)) {
        this.isShowSelect = false;
      }
    });
  },

  mounted() { },
};
</script>

<style lang="less" scoped>
#select-card {
  min-height: 850px;
  z-index: inherit;

  p {
    margin: 0;
  }

  .pc {

    // order info part
    .order-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 50px;
      background-color: #2b2c2d;
      padding: 0 40px;

      .info-sn,
      .info-price {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        line-height: 14px;
      }
    }

    // select card inputs part
    .select-card-container {
      width: 100%;
      height: 600px;
      background: #2b2c2d;
      margin-top: 19px;

      .select-title {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 16px;
        padding: 20px 0 0 40px;
      }

      .select-body {
        display: flex;
        justify-content: center;
        width: 100%;

        .center-wrapper {
          display: flex;
          flex-direction: column;
          padding-top: 80px;

          .select-inputs {
            label {
              display: flex;
              align-items: center;
              height: 42px;
              padding: 0;
              margin: 0;
              margin-bottom: 20px;

              span {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 16px;
                text-align: right;
                min-width: 80px;
                word-break: keep-all;
              }

              input {
                width: 300px;
                height: 42px;
                background: #1e2020;
                border: 1px solid #444444;
                padding: 0 10px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 14px;
                margin-left: 23px;
              }

              input::-webkit-input-placeholder {
                /* WebKit browsers 适配谷歌 */
                color: #666666 !important;
              }

              input:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 适配火狐 */
                color: #666666 !important;
              }

              input::-moz-placeholder {
                /* Mozilla Firefox 19+ 适配火狐 */
                color: #666666 !important;
              }

              input:-ms-input-placeholder {
                /* Internet Explorer 10+  适配ie*/
                color: #666666 !important;
              }

              .codeInput {
                width: 187px;
              }

              .phone-code-btn {
                background: none;
                border: none;
                width: 100px;
                height: 42px;
                background-image: url("../../../../assets/images/pc_black/center/code_btn.png");
                background-position: center center;
                background-size: 100% 100%;
                margin-left: 13px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #00ffb0;
                line-height: 14px;
                cursor: pointer;
                word-break: break-all;
                white-space: nowrap;
              }
            }

            label:last-child {
              margin: 0;
            }

            .select-box {
              position: relative;

              .select-tag {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 300px;
                height: 42px;
                background: #1e2020;
                border: 1px solid #444444;
                padding: 0 10px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                // line-height: 14px;
                margin-left: 23px;
                cursor: pointer;

                span {
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ffffff;
                  line-height: 42px;
                  padding: 0;
                  margin: 0;
                  min-width: unset;
                  max-width: 250px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                img {
                  background: none;
                  width: 12px;
                  height: 9px;
                }
              }

              .select-tag:hover {
                box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3);
              }

              .select-content {
                position: absolute;
                top: 45px;
                right: 0;
                min-width: 138px;
                background: #1e2020;
                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
                border-radius: 4px;
                z-index: 9;

                ul,
                li {
                  width: 100%;
                  list-style: none;
                  margin: 0;
                  padding: 0;
                }

                ul {
                  width: 300px;
                  padding: 10px 0;
                }

                li {
                  display: flex;
                  align-items: center;
                  height: 36px;
                  padding: 0 15px;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ffffff;
                  line-height: 14px;
                  cursor: pointer;
                  opacity: 0.5;
                  transition: all 0.2s;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                li:hover {
                  background: rgba(255, 255, 255, 0.03);
                  opacity: 1;
                }

                .dd_auth {
                  opacity: 1;

                  span {
                    word-break: keep-all;
                  }

                  span:nth-child(1) {
                    opacity: 0.5;
                  }

                  span:nth-child(2) {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #00ffb0;
                    line-height: 12px;
                    margin-left: 16px;
                    opacity: 1;
                  }
                }

                .dd_auth:hover {
                  span:nth-child(1) {
                    opacity: 1;
                  }
                }
              }
            }

            .fade-enter-active,
            .fade-leave-active {
              transition: all 0.3s;
            }

            .fade-enter,
            .fade-leave-active {
              opacity: 0;
            }
          }

          .select-agree {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 30px;
            transform: translateX(20px);

            img {
              width: 14px;
              height: 14px;
              transform: translateY(3px);
              cursor: pointer;
            }

            div {
              // width: 336px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 22px;
              margin-left: 10px;
            }

            .privacySpan {
              color: #00ffb0;
              cursor: pointer;
            }
          }

          .confirm-btn {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 40px;
            transform: translateX(20px);

            button {
              display: flex;
              justify-content: center;
              align-items: center;
              min-width: 102px;
              height: 40px;
              background: #1e2020;
              border-radius: 4px;
              border: 1px solid #666666;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #999999;
              line-height: 14px;
              cursor: pointer;
            }

            button:first-child {
              background: #00ffb1;
              color: #1e2020;
              margin-right: 20px;
            }

            button:last-child {
              padding: 0 10px;
            }

            button:hover {
              box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }

    // public style
    .price-color {
      color: #00ffb0;
    }

    .opacity-half {
      opacity: 0.5;
    }
  }

  .phone {
    display: none;
    padding: 0 50px;
  }
}

@media screen and (max-width: 768px) {
  #select-card {
    .pc {
      display: none;
    }

    .phone {
      display: block;

      .bindTitle {
        margin-top: 224px;
        font-size: 48px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 60px;
      }

      .orderInfo {
        margin-top: 15px;
        display: flex;

        p {
          font-size: 22px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }

        .orderTitle {
          font-size: 22px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          min-width: 20%;
        }

        span {
          font-size: 18px;
          color: #00ffb0;
          margin-right: 3px;
        }
      }

      form {
        margin-top: 64px;

        .selectInputs {
          .selectBox {
            font-size: 30px;
            width: inherit;

            .selectTag {
              display: flex;
              align-items: center;
              justify-content: space-between;

              span {
                color: #666666;
              }

              .isChose {
                color: #fff;
              }

              img {
                width: 30px;
              }
            }

            .selectContent {
              position: absolute;
              top: 80px;
              left: 0;
              background: #1e2020;
              box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
              border-radius: 4px;
              z-index: 9;
              width: inherit;
              min-height: 50vh;

              ul {
                padding: 10px 0;
              }

              li {
                display: flex;
                align-items: center;
                height: 36px;
                font-size: 30px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                transition: all 0.2s;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        .inputBox {
          display: flex;
          align-items: center;
          width: 100%;
          height: 100px;
          background: #1e2020;
          box-shadow: 0px 2px 0px 0px #333333;
          margin-bottom: 2px;
          position: relative;

          .inputLabel {
            width: 170px;
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 30px;
            margin-right: 30px;
          }

          input {
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 30px;
            background: none;
            border: none;
            width: inherit;
            padding-left: 0;
          }
        }

        .privacy {
          display: flex;
          width: 100%;
          margin-top: 40px;

          .privacy_left {
            width: 28px;
            height: 28px;
            margin-top: 5px;
          }

          .privacy_right {
            width: 540px;
            font-size: 26px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 40px;
            margin-left: 20px;

            .cGreen {
              line-height: 40px;
              color: #00ffb0;
            }
          }
        }

        .btnBox {
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 100px;
          padding: 0 30px;
          flex-direction: column;

          .submit {
            width: 100%;
            height: 72px;
            font-size: 32px;
            font-family: Microsoft YaHei;
            border-radius: 0;
            color: #2b2c2d;
            font-weight: 500;
            border: none;
            background: none;
            background-position: center center;
            background-size: 100% 100%;
          }

          .van-button__text {
            color: #2b2c2d;
          }

          .otherPay {
            margin-top: 60px;
          }

          .btn_color {
            background-image: url("~@/assets/images/mobile_black/center/btn_color.png");
          }

          .btn_grey {
            background-image: url("~@/assets/images/mobile_black/center/btn_grey.png");
          }
        }

        .cardPop {
          background: #1e2020;
          border-radius: 15px;

          .phoneContent {
            position: relative;
            z-index: 10;
            padding: 40px 30px;

            .contentTitle {
              font-size: 40px;
              font-weight: 600;
              color: #ffffff;
            }

            .closeIcon {
              position: absolute;
              top: 40px;
              right: 40px;
              z-index: 5;
              width: 40px;
              height: 40px;
            }

            .phoneContentInfo {
              margin-top: 40px;
              height: 20vh;
              overflow-y: auto;

              p {
                font-size: 30px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                text-align: center;
                margin-bottom: 20px;
              }

              p:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
